<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">设置发票信息</block></cu-custom>
		<view scroll-y="true">
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view class="flex">
					<view class="text-black text-df">发票类别</view>
				</view>
				<view class="flex align-center margin-top-sm">
					<view class="cu-btn text-xs margin-right" :class="active===index?'line-theme':'line-grey'" v-for="(item,index) in typeList" :key="index" @tap="handleTap(item.type)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" v-show="active===1">
				<view class="flex">
					<view class="text-black text-df">发票抬头</view>
				</view>
				<view class="margin-top">
					<radio-group @change="selectTarget">
						<label class="margin-left-sm">
							<radio class="theme text-sm" value="personal" checked></radio>
							<text class="margin-left-sm text-sm">个人</text>
						</label>
						<label class="margin-left-sm">
							<radio class="theme text-sm" value="company"></radio>
							<text class="margin-left-sm text-sm">单位</text>
						</label>
					</radio-group>
				</view>
				<view class="flex flex-direction margin-top-sm" v-if="izCompany">
					<view class="flex align-center">
						<view class="text-sm text-999" style="width: 190rpx;font-weight:500;">发票抬头</view>
						<view class="bg-lightGrey" style="flex:1;padding:10rpx 40rpx;border-radius:10rpx;">
							<input class="text-sm text-333" placeholder="请输入抬头名称" v-model="invoiceName"/>
						</view>
					</view>
					<view class="flex align-center margin-top-sm">
						<view class="text-sm text-999" style="width: 190rpx;font-weigh:600;">社会信用代码</view>
						<view class="bg-lightGrey" style="flex:1;padding:10rpx 40rpx;border-radius:10rpx;">
							<input class="text-sm text-333" placeholder="纳税人识别号" v-model="invoiceNum"/>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" v-show="active===1">
				<view class="flex">
					<view class="text-black text-df">发票内容</view>
				</view>
				<view class="flex align-center margin-top-sm">
					<view class="cu-btn text-xs margin-right" :class="cActive===index?'line-theme':'line-grey'" v-for="(item,index) in contentList" :key="index" @tap="handlecontent(index,item)">
						{{item.content}}
					</view>
				</view>
			</view>
			<view class="padding-sm flex" style="position: fixed;bottom: 30rpx;width:100%">
				<view class="padding-sm radius12 overHidden bg-theme lg flex justify-center" style="width: 100%;" @tap="confirmInvoice">
					<text class="text-lg">提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Checkout_API from '@/api/checkout.js'
	export default {
		data() {
			return {
				active:0,
				cActive:0,
				typeList:[
					{name:"不要发票",type:"Invoice"},
					{name:"开具发票",type:"needInvoice"}
				],
				contentList:[
					{content:"食品"},
					{content:"耗材"},
					{content:"办公用品"},
					{content:"商品明细"}
				],
				number:12,
				invoiceName:'',
				invoiceNum:'',
				izCompany:false,
				izNeedInvoice:false,
			};
		},
		onLoad(e) {
			if(e.receipt){
				console.log(e.receipt)
				let receipt = e.receipt
				// this.active = 1
				if(receipt.type===1){
					this.invoiceName = receipt.receipt_title
					this.invoiceNum = receipt.tax_no
					this.contentList.map((item,index) =>{
						console.log(item.content,'=====',receipt.receipt_title)
						if(item.content===receipt.receipt_title){
							this.cActive = index
						}
					})
				}
			}
		},
		watch:{
			active(newVal){
				if(newVal===1) this.izNeedInvoice = true
				else this.izNeedInvoice = true
			}
		},
		methods:{
			handleTap(type){
				if(type === 'needInvoice'){
					this.active = 1
				}else{
					this.active = 0
				}
			},
			handlecontent(index,item){
				this.cActive = index
			},
			selectTarget(e){
				// console.log(e.detail.value)
				if(e.detail.value === 'company') this.izCompany = true
				else this.izCompany = false
			},
			confirmInvoice(){
				if(this.active==1){
					let {content} = this.contentList[this.cActive]
					let companyPramas = {
						receipt_title:this.invoiceName,
						type:1,
						tax_no:this.invoiceNum,
						receipt_content:content
					}
					let personalParams = {
						receipt_title:uni.getStorageSync('userInfo').nickname ,
						type:0,
						receipt_content:content
					}
					let params = {}
					if(this.izCompany) params = companyPramas
					else params = personalParams
					Checkout_API.setReceipt(params).then(res =>{
						uni.navigateBack({
							delta:-1
						})
					})
				}else{
					Checkout_API.cancelReceipt().then(res =>{
						uni.navigateBack({
							delta:-1
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.goodsImg{
	width: 180upx;
	height: 180upx;
}
.cart-stepper{
	background: #f3f3f3;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.cartnum{
		border-left: 5rpx solid #fff;
		border-right: 5rpx solid #fff;
		padding:10rpx 14rpx;
	}
	.sbtn{
		padding:10rpx 4rpx;
		color: #333;
	}
}	
/deep/.cu-btn {
	height: 50rpx;
	border-radius: 20rpx;
}
</style>
